<!DOCTYPE html>
<!--语义话 定义当前的页面属于什么页面-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    meta 计算当前浏览器的宽度 ，
    如果小于某个宽度则变成手机端，则用a.css，如果大于某个宽度，则用b.css-->
    <!--  一般需要讲标题的内容用作展示，用作百度优化，百度收索，蚂蚁爬虫-->
    <title>万息集团-餐饮</title>
    <link rel="stylesheet" href="../css/home.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/topfoot.js"></script>
</head>
<style>
    /*!*怎么拿到div*!*/
    /*!**/
    /*div  元素选择器  标签选择器*/
    /*.two 类选择器*/
    /*two 自定义元素 */
    /**!*/
    /*two{*/
    /*    background-color: rebeccapurple*/
    /*;*/
    /*    margin-top: 10px*/
    /*;*/
    /*    padding-top: 50px*/
    /*;*/
    /*    border: 20px black solid*/
    /*;*/
    /*}*/
</style>
<body>
<!--主要用于展示给用户看-->
<!--学命名规范？-->
<!--项目规范----->
<!-- class 命名规范：
1.全小写 class=" home"
2.如果有两个单词 则中间用破折线 -   class=" home-content"
3.不要以驼峰式来写  HomeContent  homeContent
id 的命名規則：驼峰式
-->
<!--默认情况下div的宽度 浏览器的可视宽度，高度默认为0-->
<!--对div设置背景颜色有几种设置方式-->
<!--border默认透明  所有如果想要显示，必须加颜色-->
<!--
margin
border
padding
ctrl+tab  切换文件
面向对象  低耦合高内聚
-->
<!--css引用的三种方式-->
<!--<div style="background-color: blue">1</div>-->
<!--<div class="aa">-->
<!--    <div>-->
<!--        <div>2</div>-->
<!--        <div>3</div>-->
<!--    </div>-->
<!--</div>-->
<!--<div style="background-color: brown">3</div>-->
<!--web前端页面全是块的形式存在，先上下分块，在左右分块-->
<div class="home">
    <div id="top">

    </div>
    <div class="middle">
        <div>
            <div>
                <div class="title">较新动态</div>
                <div class="news">
                    <div><img src="../img/m331.jpg" /></div>
                    <div>
                        <div>
                            <div title="日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海"><a href="#"> 日本较大抹茶餐饮七叶和茶登陆上海</a>

                            </div>
                            <div>日本较大的抹茶餐饮连锁正式登陆上海，其中</div>
                        </div>
                        <div>
                            <div><a href="#">日本较大抹茶餐饮七叶和茶登陆上海</a>
                                日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海
                            </div>
                            <div>日本较大的抹茶餐饮连锁正式登陆上海，其中</div>
                        </div>
                        <div>
                            <div onclick="location.href='http://www.baidu.com';">日本较大抹茶餐饮七叶和茶登陆上海

                            </div>
                            <div>日本较大的抹茶餐饮连锁正式登陆上海，其中</div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="title">产品展示</div>
                <div class="product">
                    <div>
                        <div><img src="../img/galitudoujikuai.jpg" height="300" width="300"/></div>
                        <div>咖喱土豆鸡块</div>
                        <div>咖喱，土豆，鸡块咖喱，土豆，鸡块咖喱，土豆，鸡块咖喱，土豆，鸡块咖喱，土豆，鸡块咖喱，土豆，鸡块</div>
                    </div>
                    <div>
                        <div><img src="../img/galitudoujikuai.jpg" height="300" width="300"/></div>
                        <div>咖喱土豆鸡块</div>
                        <div>咖喱，土豆，鸡块</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="foot">

    </div>
<!--以后js取得对象用id，css取得对象用class-->
<!--    <script type="text/javascript">-->
<!--        //在js中引入-->
<!--        $(document).ready(function () {-->
<!--            $('#top').load('top.html');-->
<!--            $('#foot').load('foot.html');-->
<!--        });-->
<!--    </script>-->
</div>
</body>
</html>